<template>
	<departmentDialog ref="departmentDialogRef" width="600" :beforeClose="departmentCancel">
		<el-form ref="departmentFormRef" :rules="departmentRule" :model="departmentForm" inline label-width="auto">
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="部门名称" prop="name" class="w-100">
						<el-input v-model="departmentForm.name" placeholder="请输入部门名称" clearable></el-input>
					</el-form-item>
				</el-col>

				<el-col :span="12" v-if="!(currentDepartmentDialogType === 'edit' && departmentForm.key === 'root')">
					<el-form-item label="部门标识" prop="key" class="w-100">
						<el-input v-model="departmentForm.key" placeholder="请输入部门标识" clearable></el-input>
					</el-form-item>
				</el-col>

				<el-col :span="12" v-if="!(currentDepartmentDialogType === 'edit' && departmentForm.key === 'root')">
					<el-form-item label="部门状态" prop="status" class="w-100">
						<el-select v-model="departmentForm.status" placeholder="请选择状态">
							<el-option label="启用" value="enable"></el-option>
							<el-option label="禁用" value="disable"></el-option>
						</el-select>
					</el-form-item>
				</el-col>

				<el-col :span="12" v-if="!(currentDepartmentDialogType === 'edit' && departmentForm.key === 'root')">
					<el-form-item label="上级部门" prop="pid" class="w-100">
						<el-tree-select
							clearable
							check-strictly
							:expand-on-click-node="false"
							v-model="departmentForm.pid"
							:data="fullDepartmentTree"
							:render-after-expand="false"
							node-key="_id"
							:props="{ label: 'name' }"
						/>
					</el-form-item>
				</el-col>

				<el-col :span="12">
					<el-form-item label="部门排序" prop="sort" class="w-100">
						<el-input v-model="departmentForm.sort" placeholder="请输入部门排序" clearable></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	</departmentDialog>
</template>

<script setup>
import { ref } from "vue";
import departmentDialog from "@/components/confirmDialog/index.vue";
import { addDepartmentApi, editDepartmentApi } from "@/api/system/department";

const props = defineProps({
	fullDepartmentTree: { type: Array, required: true },
});
const emit = defineEmits(["upTreeData"]);

// 部门DialogRef
const departmentDialogRef = ref();
const departmentCancel = () => {
	departmentFormRef.value.resetFields();
	departmentFormRef.value.clearValidate();

	departmentForm.value = { name: "", key: "", status: "enable", pid: "", sort: 1 };
};
const currentDepartmentDialogType = ref("add");

// 部门表单数据
const departmentFormRef = ref();
const departmentForm = ref({ name: "", key: "", status: "enable", pid: "", sort: 1 });
const departmentRule = {
	name: [{ required: true, message: "部门名称不能为空", trigger: "blur" }],
	sort: [{ required: true, message: "部门排序不能为空", trigger: "blur" }],
	pid: [
		{
			validator: (rule, value, callback) => {
				if (!(currentDepartmentDialogType === "edit" && departmentForm.key === "root")) return callback();
				if (value === "") return callback(new Error("上级部门不能为空"));
			},
		},
	],
	key: [
		{
			validator: (rule, value, callback) => {
				if (!(currentDepartmentDialogType === "edit" && departmentForm.key === "root")) return callback();
				if (value === "") return callback(new Error("部门标识不能为空"));
			},
		},
	],
};

defineExpose({
	open: ({ type = "add", data } = {}) => {
		currentDepartmentDialogType.value = type;

		departmentDialogRef.value.open({
			title: "部门操作",
			isAsync: true,
			openAfter: () => {
				if (type === "edit") departmentForm.value = JSON.parse(JSON.stringify(data));
			},
			confirm: async ({ stopLoading, done }) => {
				// 校验表单
				try {
					await departmentFormRef.value.validate();
				} catch (e) {
					return stopLoading();
				}

				try {
					// 添加部门
					if (type === "add") {
						await addDepartmentApi(departmentForm.value);
					}

					// 编辑部门
					if (type === "edit") {
						await editDepartmentApi(departmentForm.value);
					}

					done();
				} catch (e) {
					return stopLoading();
				}

				emit("upTreeData");
			},
			cancel: () => {},
		});
	},
});
</script>

<style scoped lang="scss"></style>
